<template>
	<cl-crud :ref="setRefs('crud')" @load="onLoad">
		<el-row type="flex" align="middle">
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<!-- 新增按钮 -->
			<cl-add-btn />
			<!-- 删除按钮 -->
			<cl-multi-delete-btn />
			<cl-flex1 />
			<!-- 关键字搜索 -->
			<cl-search-key />
		</el-row>

		<el-row>
			<!-- 数据表格 -->
			<cl-table :ref="setRefs('table')" v-bind="table" />
		</el-row>

		<el-row type="flex">
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</el-row>

		<!-- 新增、编辑 -->
		<cl-upsert :ref="setRefs('upsert')" v-bind="upsert">
			<template #slot-routeType="{ scope }">
				<el-select v-model="scope.routeType" placeholder="请选择">
					<el-option
						v-for="item in routeType"
                        :key="item.name"
                        :label="item.remark"
                        :value="item.name"
                        :disabled="item.disabled"
					>
					</el-option>
				</el-select>
			</template>
		</cl-upsert>
	</cl-crud>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, computed } from "vue";
import { CrudLoad, Upsert, Table } from "cl-admin-crud-vue3/types";
import { useCool } from "/@/core";

export default defineComponent({
	setup() {
		// 功能
		const { refs, setRefs, service } = useCool();

		const routeType =  ref<any[]>([]);

		// 新增、编辑配置
		const upsert = reactive<Upsert>({
			items: [
				{
					label: "名称",
					prop: "name",
					span: 24,
					component: {
						name: "el-input"
					},
					rules: {
						required: true,
						message: "设置页面名称"
					}
				},
				{
					label: "页面路径",
					prop: "path",
					span: 24,
					component: {
						name: "el-input",
						attrs: {
							placeholder: "/ 开头的小程序页面路径"
						}
					},
					rules: {
						required: true,
						message: "设置页面类型"
					}
				},
				{
					label: "路由类型",
					prop: "routeType",
					component: {
						name: "slot-routeType"
					},
					rules: {
						required: true,
						message: "设置页面类型"
					}
				}
			]
		});

		// 表格配置
		const table = reactive<Table>({
			columns: [
				{
					type: "selection",
					width: 60
				},
				{
					label: "ID",
					prop: "id"
				},
				{
					label: "名称",
					prop: "name"
				},
				{
					label: "页面路径",
					prop: "path"
				},
				{
					label: "路由类型",
					prop: "route_type"
				},
				{
					label: "创建时间",
					prop: "createTime",
					sortable: "custom",
					minWidth: 150
				},
				{
					label: "操作",
					type: "op",
					buttons: ["edit", "delete"]
				}
			]
		});

		// crud 加载
		function onLoad({ ctx, app }: CrudLoad) {
			// 绑定 service
			ctx.service(service.magic.pageList).done();
			app.refresh();
            geiRoute()
		}
		function geiRoute() {
			service.dict.info.data({ types: "route" }).then((res:any) => {
				routeType.value= res['route'];
                console.log('routeType',routeType);
                console.log('res',res);
                
			});
		}

		return {
			refs,
			setRefs,
            routeType,
			upsert,
			table,
			onLoad
		};
	}
});
</script>
